<template>
  <!-- 放置一个图标 -->
  <div style="display:inline-block">
    <svg-icon :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'" class="fullscreen" @click="hFull" />
  </div>
</template>

<script>
// 下包后 5.2.0 导入
import screenFull from 'screenfull'

// 浏览器中自带全屏功能 document.documentElement.webkitRequestFullScreen()
// 不过有兼容性问题，所以改用插件。
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFullScreen: false
    }
  },
  created() {
    // screenfull 的官网上 提供了screenFull.isFullscreen方法

    // ESC会改变当前的全屏状态
    // screenfull是插件，它自带事件监听 on
    // screenfull.isFullscreen ：插件自带的属性，表示当前是否处于全屏状态
    screenFull.on('change', () => {
      console.log('当前是否是全屏', screenFull.isFullscreen)
      this.isFullScreen = screenFull.isFullscreen
    })
  },
  methods: {
    hFull() { // 点击图标, 触发 全屏 或 取消全屏
      screenFull.toggle()
    }
  }
}
</script>

<style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
  margin-right:10px;
  transform:translateY(4px);

}
</style>
